/**
 * Created by liubin on 2015/09/18.
 */
'use strict';

//import Immutable from 'immutable';
//import jsondiffpatch from 'jsondiffpatch';
import Joi from 'joi';
import React from 'react';
import { Link } from 'react-router';
import { connectReduxForm } from 'redux-form';
import JoiOption from '../tools/joiOption';
import joiValidator from '../tools/joiValidator';
//import joiValidatorAsync from '../tools/joiValidatorAsync';
import ValidateComponent from 'common/validateComponent';
import Messenger from 'messenger';

const loginSchema = {
    username: JoiOption(Joi.string().required().label('用户名')),
    password: JoiOption(Joi.string().required().label('密码'))
}
@connectReduxForm({
    form: 'login',
    fields: ['username', 'password'],
    //asyncValidate: joiValidatorAsync(loginSchema)
    validate: joiValidator(loginSchema)
})
class LoginForm extends ValidateComponent {
    static propTypes = {
        fields: React.PropTypes.object.isRequired,
        handleSubmit: React.PropTypes.func.isRequired
    }
    constructor(props) {
        super(props);
        let messenger = null;
        this.state = {
            messenger
        };
    }
    componentWillReceiveProps(nextProps) {
        const nextFields = nextProps.fields;
        let touched = false;
        let error = [];
        Object.keys(nextFields).forEach(value => {
            const field = nextFields[value];
            if (field.error && field.touched) {
                error.push(field.error);
            }
            if (field.touched) {
                touched = true;
            }
        });
        if (touched) {
            error = error.join('<br />');
            if (error) {
                if (!this.state.messenger) {
                    let messenger = Messenger({
                        theme: 'flat',
                        extraClasses: 'messenger-fixed messenger-on-top messenger-on-right'

                    }).post({
                        type: 'error',
                        message: error,
                        hideAfter: 0
                    });
                    this.setState({
                        messenger
                    });
                } else {
                    this.state.messenger.update({
                        type: 'error',
                        message: error,
                        hideAfter: 0
                    });
                    this.state.messenger.show();
                }
            } else {
                if (this.state.messenger) {
                    this.state.messenger.hide();
                }
            }

        }
    }
    componentWillUnmount() {
        if (this.state.messenger) {
            this.state.messenger.hide();
            this.state.messenger = null;
            //this.setState({
            //    messenger: null
            //});
        }
    }
    render() {
        const { fields: {username, password}, handleSubmit } = this.props;
        return (
            <Form onSubmit={handleSubmit}>
                <FormGroup>
                    <InputGroup lg>
                        <InputGroupAddon>
                            <Icon glyph='icon-fontello-user'/>
                        </InputGroupAddon>
                        <Input autoFocus type='text' id='username'
                               name='username'
                               className='border-focus-blue'
                               placeholder='请输入用户名'
                               {...username} />
                    </InputGroup>
                </FormGroup>
                <FormGroup>
                    <InputGroup lg>
                        <InputGroupAddon>
                            <Icon glyph='icon-fontello-key'/>
                        </InputGroupAddon>
                        <Input type='password' id='password'
                               name='password'
                               className='border-focus-blue'
                               placeholder='请输入密码'
                               {...password} />
                    </InputGroup>
                </FormGroup>
                <FormGroup>
                    <Grid>
                        <Row>

                            {/*<Col xs={6} collapseLeft collapseRight */}
                            {/*     style={{paddingTop: 10}}> */}
                            {/*    <Link to='/app/signup'>Create a Rubix */}
                            {/*        account</Link> */}
                            {/*</Col>  */}
                            <Col xs={6} xsOffset={6} collapseLeft collapseRight
                                 className='text-right'>
                                <Button outlined lg type='submit'
                                        bsStyle='blue' ><Entity entity='loginButton' /></Button>
                            </Col>
                        </Row>
                    </Grid>
                </FormGroup>
            </Form>
        );
    }
}
export default LoginForm;